import React, { memo, useRef } from 'react'
import { SearchBar } from 'antd-mobile'
import { useDispatch } from 'react-redux'
import { addTodoList } from '../features/todoList'
const Top = memo(() => {
    let searchRef = useRef()
    const dispatch = useDispatch()
    return (
        <div>
            <SearchBar
                placeholder='请输入任务'
                ref={searchRef}
                showCancelButton
                cancelText='添加'
                onCancel={() => dispatch(addTodoList({ id: new Date().getTime(), isDone: false, value: searchRef.current.nativeElement.value }))}
            />
        </div>
    )
})

export default Top